<template>
  <div class="brand">
    <div class="brand-list">
      <div class="brand-item" v-for="(item, index) in brandList" :key="index">
        <a class="brand-item-link" href="javascript:;">
          <div class="brand-logo-box">
            <img class="brand-logo" :src="item.white_logo" alt="">
          </div>
        </a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HomeVision',
  props: {
    brandList: Array
  }
}
</script>

<style lang="stylus" scoped>
@import "~common/stylus/variable"
.brand
  background-color #ededed
  padding-top 0.4rem
  padding-bottom 0.4rem
  .brand-list
    width 90%
    margin 0 auto
    display: flex
    flex-direction row
    flex-wrap:wrap
    justify-content space-between
    background #334049
    .brand-item
      width 49.2%
      height 1.8rem
      background #2d363f
      margin-bottom 0.2rem
      .brand-item:nth-child(n+10)
        margin-bottom 0
      .brand-item:hover
        background #ff9b19
      .brand-item-link
        display block
        width 100%
        height 100%
        .brand-logo-box
          width 100%
          height 100%
          display flex
          flex-direction row
          justify-content center
          align-items center
          .brand-logo
            width: 50%
</style>
